import React from 'react';
import { Tooltip } from 'antd';

import EmployeeNameWrapper from '@/pages/SalaryManage/components/EmployeeNameWrapper';
import { CHECK_STATUS } from '@/pages/SalaryManage/constant/recheckConstant';

import styles from '@/pages/SalaryManage/SalaryCalculate/Recheck/index.less';

const RejectTooltip = ({ createUser, createTime, remark }) => (
    <>
        <div>备注人：{createUser}</div>
        <div>备注时间：{createTime}</div>
        <div>驳回备注：{remark}</div>
    </>
);

const DelayMonth = ({ yearMonth }) => <span className={styles.delayIcon}>{yearMonth.substr(5)}月</span>;

const possessColumn = {
    id: {
        hidden: true,
        fixed: true
    },
    employeeName: {
        fixed: true,
        width: 154,
        render: (text, record) =>
            record.generateStatus === 0 ? (
                <EmployeeNameWrapper
                    name={text}
                    right={
                        record.delayPay ? (
                            <>
                                <DelayMonth yearMonth={record.yearMonth} />
                                <Tooltip title={record.generateError}>
                                    <i
                                        className="icon iconfont iconjinggao"
                                        style={{
                                            color: '#f5222d',
                                            fontSize: 16,
                                            marginLeft: 5,
                                            verticalAlign: 'top'
                                        }}
                                    />
                                </Tooltip>
                            </>
                        ) : (
                            <Tooltip title={record.generateError}>
                                <i
                                    className="icon iconfont iconjinggao"
                                    style={{
                                        color: '#f5222d',
                                        fontSize: 16,
                                        marginLeft: 5,
                                        verticalAlign: 'top'
                                    }}
                                />
                            </Tooltip>
                        )
                    }
                    style={{ color: '#f5222d' }}
                />
            ) : (
                <EmployeeNameWrapper
                    name={text}
                    right={record.delayPay ? <DelayMonth yearMonth={record.yearMonth} /> : null}
                />
            )
    },
    employeeNo: {
        fixed: true,
        width: 100
    },
    totalPayAmtRate: {
        scale: true,
        width: 170
    },
    hrCheckStatusName: {
        className: styles.pStatusCell,
        render(text, record) {
            return (
                <>
                    {record.hrCheckStatus === CHECK_STATUS.REJECT.code ||
                    record.hrCheckStatus === CHECK_STATUS.FINAL_REJECT.code ? (
                        <Tooltip title={<RejectTooltip {...record.hrPayrollRejectResultVo} />} placement="bottomLeft">
                            <i className="p-status-icon-reject" />
                        </Tooltip>
                    ) : null}
                    <div>{text}</div>
                </>
            );
        }
    },
    financeCheckStatusName: {
        className: styles.pStatusCell,
        render(text, record) {
            return (
                <>
                    {record.financeCheckStatus === CHECK_STATUS.REJECT.code ? (
                        <Tooltip
                            title={<RejectTooltip {...record.financePayrollRejectResultVo} />}
                            placement="bottomLeft"
                        >
                            <i className="p-status-icon-reject" />
                        </Tooltip>
                    ) : null}
                    <div>{text}</div>
                </>
            );
        }
    }
};
export { possessColumn, DelayMonth };
